<template>
  <u-form-item
    :label="label"
    :prop="props.data.field"
    :required="props.data.required"
    :rules="props.data.rules"
  >
		<u-datetime-picker 
			mode="time" 
			title="开始"
      :show="show ==  1"
			:closeOnClickOverlay="true"
			:placeholder="props.data.placeholder"
			:readonly="true"
			:disabled="props.data.disabled"
			@confirm="onChange"
			@cancel="show=false"
			@close="show=false"
		></u-datetime-picker>
		<u-datetime-picker
			mode="time" 
			title="结束"
		  :show="show == 2"
			:closeOnClickOverlay="true"
			:placeholder="props.data.placeholder"
			:readonly="true"
			:disabled="props.data.disabled"
			@confirm="onChange"
			@cancel="show=false"
			@close="show=false"
		></u-datetime-picker>
		<view @click="onShow">
			<u-input 
				v-model="val"
				:placeholder="placeholder"
				:readonly="true"
				:disabled="props.data.disabled"
			>
				<template #suffix><u-icon name="clock"></u-icon></template>
			</u-input>
		</view>
		
	</u-form-item>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue'
import { useProps } from '../hooks/props'

const props = defineProps<{ data: Record<string, any>; form: Record<string, any> }>()
const emits = defineEmits(['valueChange'])

const placeholder = computed(() => {
	if (props.data.bPlaceholder || props.data.ePlaceholder) {
		return `${props.data.bPlaceholder} ~ ${props.data.bPlaceholder}`
	}
})

const show = ref(0)
const val = ref()

const time = reactive({ begin: '', end: ''})
const { label } = useProps(props)

const onChange = (data: any) => {
	if (show.value == 1) {
		time.begin = data.value
		show.value = 2
	} else {
		time.end = data.value
		val.value = `${time.begin} ~ ${time.end}`
		emits('valueChange', { name: props.data.field, value: [time.begin, time.end] } )
		show.value = 0
	}
}

const onShow = () => {
	if (!props.data.disabeld && !props.data.readonly) {
		show.value = 1
	}
}

watch(
	() => props.data.defaultVal,
	() => {
		val.value = `${props.data.defaultVal[0]} ~ ${props.data.defaultVal[1]}`
		if (emits) {
			emits('valueChange', { name: props.data.field, value: props.data.defaultVal })
		}
	},
	{ immediate: true }
)
</script>

<style lang="scss" scoped></style>
